<template>
  <div class="topo-toolbox uni-scroll">
    <el-tabs
      v-model="tabIndex"
      type="border-card"
      :stretch="true"
    >
      <el-tab-pane
        :label="$t('device')"
        name="0"
        class="uni-scroll"
      >
        <el-collapse>
          <el-collapse-item
            v-for="(group,index1) in toolbox"
            :key="index1"
            :name="index1"
          >
            <template slot="title">
              <i style="margin-left: 20px" :class="group.icon" /><span>{{ group.title }}</span>
            </template>
            <div class="toolbox-group">
              <template v-for="(value,index) in group.items">
                <div
                  :key="index"
                  class="toolbox-item"
                  draggable="true"
                  @dragstart="onDragstart($event,value)"
                >
                  <!-- 判断是不是字体图标 -->
                  <template v-if="value.iconType === 'font'">
                    <div class="toolbox-item-icon">
                      <i
                        class="fa"
                        :class="value.icon"
                        aria-hidden="true"
                        style="font-size: 20px;line-height: 30px"
                      />
                    </div>
                    <div class="toolbox-item-text">{{ value.text }}</div>
                  </template>
                  <template v-else-if="value.iconType === 'icon'">
                    <div class="toolbox-item-icon">
                      <i
                        class="fa iconfont"
                        :class="value.icon"
                        aria-hidden="true"
                      />
                    </div>
                    <div class="toolbox-item-text">{{ value.text }}</div>
                  </template>
                  <template v-else>
                    <div class="toolbox-item-icon">
                      <img class="topo-dom" :src="value.icon" style="width: 30px;height: 30px;margin: 0 auto">
                    </div>
                    <div class="toolbox-item-text">{{ value.text }}</div>
                  </template>
                </div>
              </template>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane :label="$t('component')" name="1" class="uni-scroll">
        <el-collapse>
          <el-collapse-item
            v-for="(group,index1) in svgToolbox"
            :key="index1"
            :name="index1"
          >
            <template slot="title">
              <i style="margin-left: 20px" :class="group.icon" /><span>{{ group.title }}</span>
            </template>
            <div class="toolbox-group">
              <template v-for="(value,index) in group.items">
                <div
                  :key="index"
                  class="toolbox-item"
                  draggable="true"
                  @dragstart="onDragstart($event,value)"
                >
                  <!--svg-->
                  <template v-if="value.iconType === 'svg'">
                    <div class="item-icon">
                      <embed
                        class="icon iconfont"
                        :src="value.icon"
                        width="40px"
                        height="40px"
                        style="pointer-events: none"
                        type="image/svg+xml"
                        pluginspage="http://www.adobe.com/svg/viewer/install/"
                      >
                    </div>
                    <div class="toolbox-item-text">{{ value.text }}</div>
                  </template>
                  <template v-else>
                    <div class="toolbox-item-icon">
                      <img
                        class="topo-dom"
                        :src="value.icon"
                        style="width: 40px;height: 40px;"
                      >
                    </div>
                    <div class="toolbox-item-text">{{ value.text }}</div>
                  </template>
                </div>
              </template>
            </div>
          </el-collapse-item>
        </el-collapse>
        <div style="width: 50px;margin: 10px auto">
          <el-button
            type="primary"
            @click="gotoComponent"
          >{{ $t('edit') }}</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { listSensorWith } from '@/api/iot/iotDeviceSensorApi'
import { getBaseComponents } from './util/baseComponentList'
import { listDeviceViewComponentGroup } from '@/api/iot/iotDeviceViewComponentGroupApi'
import { listDeviceViewComponent } from '@/api/iot/iotDeviceViewComponentApi'

export default {
  name: 'TopoToolbox',
  data() {
    return {
      toolbox: [],
      svgToolbox: [],
      selectedIndex: -1,
      deviceCore: null,
      tabIndex: '0'
    }
  },
  mounted() {
    const param = this.$route.query
    this.deviceCore = param.deviceCore
    this.listSensorWith()
    this.getSvg()
  },
  methods: {
    getSvg() {
      const that = this
      that.svgToolbox = []
      listDeviceViewComponentGroup().then(groupListRes => {
        const groupListCode = groupListRes.code
        const groupListData = groupListRes.data
        if (groupListCode === '200') {
          groupListData.forEach(group => {
            listDeviceViewComponent({
              groupId: group.groupId
            }).then(componentListRes => {
              const componentListCode = componentListRes.code
              const componentListData = componentListRes.data
              if (componentListCode === '200') {
                const componentList = []
                componentListData.forEach(component => {
                  switch (component.type) {
                    case 'svg':
                      componentList.push({
                        'text': component.name,
                        'icon': component.url,
                        'iconType': component.type,
                        'info': {
                          'type': 'svg-image',
                          'action': [],
                          'dataBind': {
                            'name': component.name
                          },
                          'style': {
                            'radius': 0,
                            'position': {
                              'x': 0,
                              'y': 0,
                              'w': 100,
                              'h': 100
                            },
                            'backColor': 'transparent',
                            'zIndex': 1,
                            'url': component.url
                          }
                        }
                      })
                      break
                    default:
                      componentList.push({
                        'text': component.name,
                        'icon': component.url,
                        'iconType': component.type,
                        'info': {
                          'type': 'image',
                          'action': [],
                          'dataBind': {
                            'name': component.name
                          },
                          'style': {
                            'radius': 0,
                            'position': {
                              'x': 0,
                              'y': 0,
                              'w': 100,
                              'h': 100
                            },
                            'backColor': 'transparent',
                            'zIndex': 1,
                            'url': component.url
                          }
                        }
                      })
                  }
                })
                that.svgToolbox.push({
                  'title': group.name,
                  'icon': 'payment',
                  'opened': false,
                  'items': componentList
                })
              }
            })
          })
        }
      })
    },
    gotoComponent() {
      this.$router.push({
        path: '/topo/component/manage'
      })
    },
    listSensorWith() {
      const that = this
      listSensorWith({
        deviceCore: this.deviceCore,
        withExplain: true,
        withParam: true,
        withSetting: true
      }).then(res => {
        const { code, data } = res
        that.toolbox = []
        that.toolbox.push(getBaseComponents(that))
        if (code === '200') {
          data.forEach(sensor => {
            if (sensor.explainList.length === 0 && sensor.settingList.length === 0 && sensor.paramList.length === 0) {
              return
            }
            const sensorComponent = {
              'title': sensor.sensorName + ' [' + that.$t('port') + ':' + sensor.port + ']',
              'icon': sensor.iconUrl,
              'opened': false,
              'items': []
            }
            sensor.explainList.forEach(explain => {
              sensorComponent.items.push({
                'text': explain.name,
                'icon': explain.iconUrl,
                'iconType': 'png',
                'info': {
                  'type': 'iot-explain',
                  'action': [],
                  'dataBind': {
                    'editModel': true,
                    'name': explain.name,
                    'deviceCore': that.deviceCore,
                    'showTypeList': [{
                      'label': that.$t('text'),
                      'value': 'text'
                    }, {
                      'label': that.$t('curve'),
                      'value': 'curve'
                    }, {
                      'label': that.$t('value'),
                      'value': 'value'
                    }, {
                      'label': that.$t('value') + that.$t('unit'),
                      'value': 'valueWithUnit'
                    }, {
                      'label': that.$t('name') + that.$t('value') + that.$t('unit'),
                      'value': 'nameWithValueWithUnit'
                    }],
                    'showType': 'text',
                    'port': explain.port,
                    'keyName': explain.keyName
                  },
                  'style': {
                    'radius': 0,
                    'position': {
                      'x': 0,
                      'y': 0,
                      'w': 300,
                      'h': 50
                    },
                    'backColor': 'transparent',
                    'zIndex': 1,
                    'url': ''
                  }
                }
              })
            })
            sensor.settingList.forEach(setting => {
              sensorComponent.items.push({
                'text': setting.name,
                'icon': setting.iconUrl,
                'iconType': 'png',
                'info': {
                  'type': 'iot-setting',
                  'action': [],
                  'dataBind': {
                    'editModel': true,
                    'name': setting.name,
                    'deviceCore': that.deviceCore,
                    'port': setting.port,
                    'keyName': setting.keyName
                  },
                  'style': {
                    'radius': 0,
                    'position': {
                      'x': 0,
                      'y': 0,
                      'w': 300,
                      'h': 50
                    },
                    'backColor': 'transparent',
                    'zIndex': 1,
                    'url': ''
                  }
                }
              })
            })
            sensor.paramList.forEach(param => {
              sensorComponent.items.push({
                'text': param.name,
                'icon': param.iconUrl,
                'iconType': 'png',
                'info': {
                  'showType': 'text',
                  'type': 'iot-param',
                  'action': [],
                  'dataBind': {
                    'editModel': true,
                    'name': param.name,
                    'deviceCore': that.deviceCore,
                    'showTypeList': [{
                      'label': that.$t('text'),
                      'value': 'text'
                    }, {
                      'label': that.$t('value'),
                      'value': 'value'
                    }, {
                      'label': that.$t('value') + that.$t('unit'),
                      'value': 'valueWithUnit'
                    }, {
                      'label': that.$t('name') + that.$t('value') + that.$t('unit'),
                      'value': 'nameWithValueWithUnit'
                    }],
                    'port': param.port,
                    'keyName': param.keyName
                  },
                  'style': {
                    'radius': 0,
                    'position': {
                      'x': 0,
                      'y': 0,
                      'w': 300,
                      'h': 50
                    },
                    'backColor': 'transparent',
                    'zIndex': 1,
                    'url': ''
                  }
                }
              })
            })
            that.toolbox.push(sensorComponent)
          })
        }
      })
    },
    onDragstart(event, info) {
      const infoJson = JSON.stringify(info.info)
      event.dataTransfer.setData('my-info', infoJson)
    }
  }
}
</script>

<style lang="scss">
.topo-toolbox {
  overflow-y: auto;
  overflow-x: hidden;

  .toolbox-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: space-between;

    .toolbox-item {
      width: 70px;
      margin: 10px 5px;
      padding: 5px;
      color: #777;
      border: transparent solid 1px;
      text-align: center;

      &.base {
        width: 64px;
      }

      .toolbox-item-icon {

      }

      .toolbox-item-text {
        margin-top: 10px;
      }
    }

    .toolbox-item:hover {
      border: #ccc solid 1px;
      background: #ccc;
      color: #3388ff;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss" scoped>
.item-icon {
  height: 30px;
  .iconfont {
    font-size: 30px;
    margin-left: 14px;
  }
}

.el-tab-pane{
  height: calc(100vh - 172px);
}
</style>
